<template>
  <div class="directorys-container">
    <div class="app-container">
      <!-- 显示卡片阴影的时机 -->
      <el-card shadow>
        <div class="line" v-if="requestTags.subjecttag"></div>
        <!-- 表单区域 -->
        <el-form :model="requestTags" :inline="true">
          <!-- 标签名称 -->
          <el-form-item :label="$t('标签名称')" class="tagName">
            <el-input
              v-model="requestTags.tagName"
              clearable
              @keyup.enter.native="getList"
            ></el-input>
          </el-form-item>
          <!-- 状态  -->
          <el-form-item :label="$t('状态')">
            <el-select v-model="requestTags.state" placeholder="请选择">
              <el-option :label="$t('启用')" :value="1"></el-option>
              <el-option :label="$t('禁用')" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- 清除按钮 -->
            <el-button @click="clearForm">{{ $t("清除") }}</el-button>
          </el-form-item>
          <el-form-item>
            <!-- 搜寻按钮 -->
            <el-button type="primary" @click="sssj">{{ $t("搜寻") }}</el-button>
          </el-form-item>
          <el-form-item class="fr">
            <!-- 返回学科按钮 -->
            <el-button
              v-if="this.$route.params.id ? true : false"
              type="text"
              @click="$router.push('/subjects/list')"
              >返回学科</el-button
            >
            <!-- 新增标签按钮 -->
            <el-button
              round
              @click="isAddDialogShow = true"
              type="success"
              icon="el-icon-edit"
              >{{ $t("新增标签") }}</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 数据总量提示 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!--表格区域: 存放数据 -->
        <el-table
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="正在玩命加载中……"
        >
          <el-table-column
            :label="$t('序号')"
            width="80"
            type="index"
          ></el-table-column>
          <el-table-column
            :label="$t('所属学科')"
            prop="subjectName"
          ></el-table-column>
          <el-table-column
            :label="$t('标签名称')"
            prop="tagName"
          ></el-table-column>
          <el-table-column
            :label="$t('创建者')"
            prop="username"
          ></el-table-column>
          <el-table-column :label="$t('创建时间')">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('状态')">
            <template slot-scope="scoped">
              <span>{{ scoped.row.state ? "已启用" : "已禁用" }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" :label="$t('操作')">
            <template slot-scope="scoped">
              <el-link
                type="primary"
                :underline="false"
                @click="handleChange(scoped.row)"
                >{{ scoped.row.state ? "禁用" : "启用" }}</el-link
              >
              <el-link
                :type="scoped.row.state ? 'info' : 'primary'"
                :underline="false"
                :disabled="scoped.row.state ? true : false"
                @click="handleUpdate(scoped.row)"
                >修改</el-link
              >
              <el-link
                :type="scoped.row.state ? 'info' : 'primary'"
                :underline="false"
                :disabled="scoped.row.state ? true : false"
                @click="handleRemove(scoped.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination fr">
          <PageTool
            :current-page="requestTags.page"
            :paginationPage="requestTags.page"
            :paginationPagesize="requestTags.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <tags-add
          v-if="isAddDialogShow"
          @close="isAddDialogShow = false"
          @addTags="addTags"
          :subjectAdd="requestTags"
        />
        <!-- 编辑标签弹层 -->
        <tags-edit
          v-if="isEditDialogShow"
          :tagObj="tagObj"
          :subjectEdit="requestTags"
          @close="isEditDialogShow = false"
          @EditTag="tagEdit"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
// 导入分页组件
import PageTool from '../../module-manage/components/page-tool.vue'
import TagsAdd from '../components/tags-add.vue'
import TagsEdit from '../components/tags-edit.vue'

export default {
  name: 'TagsIndex',
  // 组件
  components: {
    TagsAdd,
    TagsEdit,
    PageTool
  },
  data () {
    return {
      total: null,
      // 点击编辑修改的当前行信息
      tagObj: {},
      // 控制编辑弹窗的显示隐藏
      isEditDialogShow: false,
      // 控制添加弹窗的显示隐藏
      isAddDialogShow: false,
      // 存储表格中信息
      dataList: [],
      // 表单加载loading
      listLoading: false,
      // 数据总数提示文本
      alertText: '',
      requestTags: {
        page: 1,
        pagesize: 10,
        tagName: null,
        state: null,
        // 添加搜索ID
        subjecttag: this.$route.query.name,
        subjectID: this.$route.query.id
      }
    }
  },
  created () {
    this.getList()
  },
  // 方法
  methods: {
    // 点击搜索
    sssj () {
      this.requestTags.page = 1
      // 刷新页面
      this.getList()
    },
    // 获取列表数据
    getList () {
      this.listLoading = true
      if (this.$route.params.id) {
        this.requestTags.subjectID = this.$route.params.id
      }
      if (this.requestTags.state === '' || this.requestTags.tagName === '') {
        this.requestTags.state = null
        this.requestTags.tagName = null
      }
      list(this.requestTags)
        .then(({ data }) => {
          this.dataList = data.items
          this.total = data.counts
          this.alertText = `共 ${data.counts} 条记录`
          this.listLoading = false
        })
        .catch((e) => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    // 清空表单
    clearForm () {
      this.requestTags.tagName = ''
      this.requestTags.state = null
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestTags.pagesize = val
      this.getList()
    },
    // 显示的页码
    handleCurrentChange (val) {
      this.requestTags.page = val
      this.getList()
    },
    // 监听添加目录事件，刷新列表
    addTags () {
      this.getList()
      this.isAddDialogShow = false
    },
    // 状态改变事件
    handleChange (row) {
      changeState({
        id: row.id,
        state: row.state ? 0 : 1
      })
        .then((data) => {
          row.state = row.state ? 0 : 1
        })
        .catch((e) => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    // 编辑
    handleUpdate (row) {
      this.tagObj = row
      this.isEditDialogShow = true
    },
    tagEdit () {
      this.getList()
      this.isEditDialogShow = false
    },
    // 删除
    handleRemove (row) {
      this.$confirm('此操作将永久删除标签' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id: row.id })
            .then((response) => {
              this.$message.success('已成功删除该标签')
              this.getList()
            })
            .catch((response) => {
              this.$message.error('删除失败，请稍后重试')
            })
        })
        .catch(() => {
          this.$message.info('已取消该操作')
        })
    }
  }
}
</script>

<style scoped lang="scss">
.el-breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
}
.line {
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
}
.directorys-container {
  .alert {
    margin: 10px 0px;
  }
  .pagination {
    margin: 20px 0;
  }
  .el-link {
    margin-right: 8px;
  }

  .tagName {
    margin-right: 60px;
  }
}
</style>
